<template>
	<view>
		<uni-card class="uni-card">
			<uni-row>
				<uni-col :span="2" offset="1">
					<view>
						<image src="../../static/p2.png" style="height: 38px;width: 38px;"></image>
					</view>
				</uni-col>
				<uni-col :span="4" offset="3">
					<uni-row>
						<view class="top">
							预约入园时间
						</view>
					</uni-row>
					<uni-row>
						<view class="top1">
							2024年6月03日  09:00-11:00
						</view>
					</uni-row>
				</uni-col>
			</uni-row>
		</uni-card>
	</view>
	<uni-row>
		<uni-col span="10" offset="1">
		    <view class="two">
		        主预约人
	        </view>
	    </uni-col>
	</uni-row>
	
	<view>
		<uni-card class="uni-card1">
			<view >
				<text class="top21">姓名</text><text class="top22">*</text><text class="top23">:</text>
				<uni-easyinput class="love" placeholder="请输入预约人姓名" ></uni-easyinput>
			</view>
			<view >
				<text class="top21">证件类型</text><text class="top22">*</text><text class="top23">:</text>
				<uni-data-select
				        v-model="value"
				        :localdata="range"
				        @change="change"
				      ></uni-data-select>
			</view>
			<view>
				<text class="top21">证件号码</text><text class="top22">*</text><text class="top23">:</text>
				<uni-easyinput class="love" placeholder="请输入证件号码" ></uni-easyinput>
			</view>
			<view>
				<text class="top21">手机号码</text><text class="top22">*</text><text class="top23">:</text>
				<uni-easyinput class="love" placeholder="请输入手机号码" ></uni-easyinput>
			</view>
			<view>
				<uni-row>
					<uni-col :span="1" offset="0">
						<uni-icons @click="play1" v-if="flag === false" type="checkbox" size="20" color="green"></uni-icons>
						<uni-icons @click="play1" v-if="flag === true" type="checkbox-filled" size="20" color="green"></uni-icons>
					</uni-col>
					<uni-col :span="21" offset="1">
						<text class="one">
							同行人有6周岁（含）以下货身高1.2米（含）以下儿童，只需选择儿童数。
						</text>
					</uni-col>
				</uni-row>
			</view>
			
			<view v-if="flag === true">
				<uni-row>
					<uni-col :span="4" offset="9">
						<button @click="play2" v-if="blag === 1" class="uni-button2" size="mini" type="default">1人</button>
						<button @click="play2" v-if="blag === 2" class="uni-button" size="mini" type="default">1人</button>
					</uni-col>
				    <uni-col :span="4" offset="1">
						<button @click="play3" v-if="alag === 1" class="uni-button2" size="mini" type="default">2人</button>
						<button @click="play3" v-if="alag === 2" class="uni-button" size="mini" type="default">2人</button>
					</uni-col>
				    <uni-col :span="4" offset="1">
						<button @click="play4" v-if="clag === 1" class="uni-button2" size="mini" type="default">3人</button>
						<button @click="play4" v-if="clag === 2" class="uni-button" size="mini" type="default">3人</button>
					</uni-col>
				</uni-row>
			</view>
		</uni-card>
	</view>
	<view v-for="(form, index) in forms" :key="index">
		<uni-row>
			<uni-col span="10" offset="1">
			    <view class="two">
			        同行人{{index + 1}}
		        </view>
		    </uni-col>
			<uni-col span="50" offset="10">
				<view>
					<uni-icons @click="del1(index)" type="trash" size="20" color="black"></uni-icons>
				</view>
			</uni-col>
		</uni-row>
		<uni-card class="uni-card1-1">
			<view >
				<text class="top21">姓名</text><text class="top22">*</text><text class="top23">:</text>
				<uni-easyinput class="love" v-model="form.name" placeholder="请输入预约人姓名" ></uni-easyinput>
			</view>
			<view >
				<text class="top21">证件类型</text><text class="top22">*</text><text class="top23">:</text>
				<uni-data-select
				        v-model="form.idType"
				        :localdata="range"
				        @change="change"
				      ></uni-data-select>
			</view>
			<view>
				<text class="top21">证件号码</text><text class="top22">*</text><text class="top23">:</text>
				<uni-easyinput class="love" v-model="form.idNumber" placeholder="请输入证件号码" ></uni-easyinput>
			</view>
			<view>
				<text class="top21">手机号码</text><text class="top22">*</text><text class="top23">:</text>
				<uni-easyinput class="love" v-model="form.phoneNumber" placeholder="请输入手机号码" ></uni-easyinput>
			</view>
		</uni-card>
	</view>
	
	<view>
		<uni-row>
			<uni-col :span="4" offset="1">
				<button @click="add1" class="uni-button1">+添加同行人</button>
			</uni-col>
		</uni-row>
	</view>
	<uni-row >
		<uni-col :span="1" offset="1">
		<view>
			<uni-icons type="info" size="20"></uni-icons>
		</view>
	</uni-col>
	<uni-col :span="15" offset="1">
		<view class="one">
			<text>
				最多可预约成人4人，儿童3人
			</text>
		</view>
	</uni-col>
	</uni-row>
	<uni-row>
		<uni-col :span="4" offset="1">
			<button @click="sucess" class="uni-button3">提交预约</button>
		</uni-col>
	</uni-row>
</template>

<script setup>
	import { ref } from 'vue';
	let value = ref(0)
	let range = ref([
		{ value: 0, text: "中国居民身份证" },
		{ value: 1, text: "外籍" },
		{ value: 2, text: "港澳台居民身份证" },
	])
	let change = function(){
		console.log("e:", e);
	}
	let flag = ref(false)
	let play1 = function(){
		if(flag.value == false){
			flag.value = true
		}else{
			flag.value = false
		}
	}
	let blag = ref(1)
	let alag = ref(1)
	let clag = ref(1)
	let play2 = function(){
		blag.value=2
		alag.value=1
		clag.value=1
	}
	let play3 = function(){
		blag.value=1
		alag.value=2
		clag.value=1
	}
	let play4 = function(){
		blag.value=1
		alag.value=1
		clag.value=2
	}
	let forms = ref([{
	  name: '',
	  idType: '',
	  idNumber: '',
	  phoneNumber: ''
	}])
	let add1 = function(){
		if (forms.value.length > 2)
		  return
		forms.value.push({
		  name: '',
		  idType: '',
		  idNumber: '',
		  phoneNumber: ''
		});
	}
	let del1 = function(index){
		forms.value.splice(index, 1);
	}
	
	let sucess = function() {
		uni.navigateTo({
			url: '/pages/leave/Booking_sucess'
		})
	}
</script>

<style scoped>
	.uni-card{
		width: 300px;
		height: 60px;
		background: #FFFFFF;
		border-radius: 20px;
	}
	.uni-button3{
		width: 320px;
		height: 45px;
		background: #8DCB6D;
		border-radius: 25px;
	}
	.uni-card1{
		width: 300px;
		height: 369px;
		background: #FFFFFF;
		border-radius: 12px;
	}
	.uni-card1-1{
		width: 300px;
		height: 300px;
		background: #FFFFFF;
		border-radius: 12px;
	}
	.text1{
		height: 100%;
	}
	.uni-card2{
		width: 300px;
		height: 80px;
		background: #FFFFFF;
		border-radius: 12px;
	}
	.uni-button1{
		width: 320px;
		height: 50px;
		background: #FFFFFF;
		border: 1px solid #8DCB6D;
		border-radius: 12px;
		margin-bottom: 10px;
	}
	.uni-button2{
		width: 60px;
		height: 24px;
		background: #F4F4F4;
		border: 1px solid #BEC3BC;
		border-radius: 14px;
	}
	.one{
		height: 50px;
	}
	.main{
		width: 38px;
		height: 38px;
		background: url("../../static/p2.png");
		background-size: cover;
	}
	.top{
		width: 72px;
		height: 21px;
		font-family: PingFangSC-Regular;
		font-weight: 400;
		font-size: 12px;
		color: #000000;
		letter-spacing: 0;
	}
	.top1{
		width: 351px;
		height: 21px;
		font-family: PingFangSC-SNaNpxibold;
		font-weight: 600;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.top21 {
	 color: #05261b;
	 font-size: 15px;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 2;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
	}
	.top22 {
	 color: #e8240f;
	 font-size: 15px;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 0;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
	}
	.top23 {
	 color: #05261b;
	 font-size: 15px;
	 font-face: PingFangSC;
	 font-weight: 400;
	 line-height: 0;
	 letter-spacing: 0;
	 paragraph-spacing: 0;
	 text-align: left;
	}
	.two{
		width: 60px;
		height: 21px;
		font-family: PingFangSC-Medium;
		font-weight: 500;
		font-size: 15px;
		color: #000000;
		letter-spacing: 0;
	}
	.uni-easyinput{
		width: 319px;
		height: 40px;
		border-color:#000000 ;
		border-radius: 6px;
	}
	.uni-button{
		width: 60px;
		height: 24px;
		background: #F1FAEC;
		border: 1px solid #8DCB6D;
		border-radius: 14px;
	}
	.love{
		width: 280px;
	}
</style>
